<template>
  <div id="userApprove">
    <div class="userMaterialTitle">
      <h2 class="active">我的认证 <span></span></h2>
    </div>
    <div class="userApproveContent">
      <div class="userApproveContentStylist ticationCommon">
        <img src="../../assets/img/user/renzhengpeizhi@2x.png" alt="">
        <div class="ticationCommonInfo">
          <h2>设计师认证</h2>
          <p>适用于个人设计师的身份认证</p>
        </div>
        <button @click="authApprove.designer === 1 ? '' : popupShowStylist = true" :class="{gray: authApprove.designer === 1}">{{authApprove.designer === 1 ? '已认证' : '去认证'}}</button>
      </div>
      <div class="userApproveContentEnterprise ticationCommon">
        <img src="../../assets/img/user/huiyuan(1)@2x.png" alt="">
        <div class="ticationCommonInfo">
          <h2>企业认证</h2>
          <p>适用于企业等单位的身份认证</p>
        </div>
        <button @click="authApprove.enterprise === 1 ? '' : popupShowEnterprise = true" :class="{gray: authApprove.enterprise === 1}">{{authApprove.enterprise === 1 ? '已认证' : '去认证'}}</button>
      </div>
      <div class="userApproveContentSchool ticationCommon">
        <img src="../../assets/img/user/jigou@2x.png" alt="">
        <div class="ticationCommonInfo">
          <h2>园区认证</h2>
          <p>适用于园区、机构的身份认证</p>
        </div>
        <button @click="authApprove.park === 1 ? '' : popupShowSchool = true" :class="{gray: authApprove.park === 1}">{{authApprove.park === 1 ? '已认证' : '去认证'}}</button>
      </div>
    </div>
    <popup v-model="popupShowStylist" position="top" @on-hide="onPopupHideStylist()">
      <div class="userApprovePopup">
        <div class="userApprovePopupTitle">
          <h2>完善个人信息</h2>
          <i @click="popupShowStylist = false">x</i>
        </div>
        <div class="userApprovePopupCon">
          <ul>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>姓名：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="stylistUserName">
              </div>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>擅长领域：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <user-select :option="stylistSkilledOption" @change="onStylistSkilled($event)"></user-select>
              </div>
            </li>
            <!-- <li>
              <div class="userMaterialMaterialLeft">
                <span>手机号：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="stylistMobile">
              </div>
            </li> -->
            <li>
              <div class="userMaterialMaterialLeft">
                <span>邮箱：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="stylistEmail">
              </div>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>QQ号：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="stylistTencent">
              </div>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>身份证号：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="stylistIdCardNum">
              </div>
            </li>
            <!-- <li>
              <div class="userMaterialMaterialLeft">
                <span>后台登录账号：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="stylistLoginName">
              </div>
            </li> -->
            <li>
              <div class="userMaterialMaterialLeft">
                <span>意向合作院校：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <user-select :option="stylistTeamworkOption" :showRadio="true" @change="onStylistTeamwork($event)"></user-select>
              </div>
            </li>
          </ul>
          <flexbox>
            <flexbox-item :span="1/5">
              <div class="userMaterialMaterialLeft" style="width: 100%;">
                <span>个人介绍：</span>
              </div>
            </flexbox-item>
            <flexbox-item>
              <div class="userMaterialMaterialRight" style="width: 100%;">
                <textarea name="" v-model="stylistIntroduce"></textarea>
              </div>
            </flexbox-item>
          </flexbox>
          <flexbox>
            <flexbox-item :span="1/5">
              <div class="userMaterialMaterialLeft" style="width: 100%;">
                <span>上传身份证：</span>
              </div>
            </flexbox-item>
            <flexbox-item>
              <div class="userMaterialMaterialRight" style="width: 100%;">
                <label for="identityCardFront">
                  <img :src="identityCardFrontImg" alt="">
                  <input type="file" id="identityCardFront" v-show="false" @change="onIdentityCardFront($event)">
                </label>
                <label for="identityCardRear">
                  <img :src="identityCardRearImg" alt="">
                  <input type="file" id="identityCardRear" v-show="false" @change="onIdentityCardRear($event)">
                </label>
              </div>
            </flexbox-item>
          </flexbox>
          <flexbox>
            <div class="btnBox">
              <button class="btnDef" @click="handApproveDesigner()">提交</button>
            </div>
          </flexbox>
        </div>
      </div>
    </popup>
    <popup v-model="popupShowEnterprise" position="top" @on-hide="onPopupHideEnterprise()">
      <div class="userApprovePopup">
        <div class="userApprovePopupTitle">
          <h2>完善企业信息</h2>
          <i @click="popupShowEnterprise = false">x</i>
        </div>
        <div class="userApprovePopupCon">
          <ul>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>公司名称：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="companyName">
              </div>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>擅长领域：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <user-select :option="enterpriseSkilledOption" @change="onEnterpriseSkilled($event)"></user-select>
              </div>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>统一社会信用代码：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="companyCreditCode">
              </div>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>企业固话：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="companyFixedTelephone">
              </div>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>企业地址：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="companyAddress">
              </div>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>负责人姓名：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="companyPrincipal">
              </div>
            </li>
            <!-- <li>
              <div class="userMaterialMaterialLeft">
                <span>负责人电话：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="companyPrincipalMobile">
              </div>
            </li> -->
            <li>
              <div class="userMaterialMaterialLeft">
                <span>企业邮箱：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="companyEmail">
              </div>
            </li>
            <!-- <li>
              <div class="userMaterialMaterialLeft">
                <span>后台登录账号：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="companyLoginName">
              </div>
            </li> -->
            <li>
              <div class="userMaterialMaterialLeft">
                <span>意向合作院校：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <user-select :option="enterpriseTeamworkOption" :showRadio="true" @change="onEnterpriseTeamwork($event)"></user-select>
              </div>
            </li>
          </ul>
          <flexbox>
            <flexbox-item :span="1/5">
              <div class="userMaterialMaterialLeft" style="width: 100%;">
                <span>个人介绍：</span>
              </div>
            </flexbox-item>
            <flexbox-item>
              <div class="userMaterialMaterialRight" style="width: 100%;">
                <textarea name="" v-model="companyIntroduce"></textarea>
              </div>
            </flexbox-item>
          </flexbox>
          <flexbox>
            <flexbox-item :span="1/5">
              <div class="userMaterialMaterialLeft" style="width: 100%;">
                <span>上传负责人身份证：</span>
              </div>
            </flexbox-item>
            <flexbox-item>
              <div class="userMaterialMaterialRight" style="width: 100%;">
                <label for="principalIdentityCardFront">
                  <img :src="principalIdentityCardFrontImg" alt="">
                  <input type="file" id="principalIdentityCardFront" v-show="false" @change="onPrincipalIdentityCardFront($event)">
                </label>
                <label for="principalIdentityCardRear">
                  <img :src="principalIdentityCardRearImg" alt="">
                  <input type="file" id="principalIdentityCardRear" v-show="false" @change="onPrincipalIdentityCardRear($event)">
                </label>
              </div>
            </flexbox-item>
          </flexbox>
          <flexbox>
            <flexbox-item :span="1/5">
              <div class="userMaterialMaterialLeft" style="width: 100%;">
                <span>上传营业执照：</span>
              </div>
            </flexbox-item>
            <flexbox-item>
              <div class="userMaterialMaterialRight" style="width: 100%;">
                <label for="businessLicense">
                  <img :src="businessLicenseImg" alt="">
                  <input type="file" id="businessLicense" v-show="false" @change="onBusinessLicense($event)">
                </label>
              </div>
            </flexbox-item>
          </flexbox>
          <flexbox>
            <div class="btnBox">
              <button class="btnDef" @click="handApproveEnterprise()">提交</button>
            </div>
          </flexbox>
        </div>
      </div>
    </popup>
    <popup v-model="popupShowSchool" position="top" @on-hide="onPopupHideSchool()">
      <div class="userApprovePopup">
        <div class="userApprovePopupTitle">
          <h2>完善园区信息</h2>
          <i @click="popupShowSchool = false">x</i>
        </div>
        <div class="userApprovePopupCon">
          <ul>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>园区名称：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="schoolName">
              </div>
            </li>
            <!-- <li>
              <div class="userMaterialMaterialLeft">
                <span>园区电话：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="schoolMobile">
              </div>
            </li> -->
            <li>
              <div class="userMaterialMaterialLeft">
                <span>园区地址：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="schoolAddress">
              </div>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span>负责人姓名：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="schoolPrincipalName">
              </div>
            </li>
            <!-- <li>
              <div class="userMaterialMaterialLeft">
                <span>后台登录账号：</span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" v-model="schoolLoginName">
              </div>
            </li> -->
          </ul>
          <flexbox>
            <flexbox-item :span="1/5">
              <div class="userMaterialMaterialLeft" style="width: 100%;">
                <span>园区介绍：</span>
              </div>
            </flexbox-item>
            <flexbox-item>
              <div class="userMaterialMaterialRight" style="width: 100%;">
                <textarea name="" v-model="schoolIntroduce"></textarea>
              </div>
            </flexbox-item>
          </flexbox>
          <flexbox>
            <flexbox-item :span="1/5">
              <div class="userMaterialMaterialLeft" style="width: 100%;">
                <span>园区logo/背景图：</span>
              </div>
            </flexbox-item>
            <flexbox-item>
              <div class="userMaterialMaterialRight" style="width: 100%;">
                <label for="schoolyardBack">
                  <img :src="schoolyardLogoImage" alt="">
                  <input type="file" id="schoolyardBack" v-show="false" @change="onSchoolyardLogoImage($event)">
                </label>
                <label for="schoolyardLogo">
                  <img :src="schoolyardBackImage" alt="">
                  <input type="file" id="schoolyardLogo" v-show="false" @change="onSchoolyardBackImage($event)">
                </label>
              </div>
            </flexbox-item>
          </flexbox>
          <flexbox>
            <div class="btnBox">
              <button class="btnDef" @click="fetchApprovePark()">提交</button>
            </div>
          </flexbox>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import { Popup, Flexbox, FlexboxItem } from 'vux'
import userSelect from '../../components/userSelect/userSelect.vue'

export default {
  name: 'userApprove',
  components: {
    Popup,
    Flexbox,
    FlexboxItem,
    userSelect
  },
  data () {
    return {
      popupShowStylist: false,
      popupShowEnterprise: false,
      popupShowSchool: false,
      identityCardFrontImg: require('../../assets/img/user/uploader.png'),
      identityCardRearImg: require('../../assets/img/user/uploader.png'),
      principalIdentityCardFrontImg: require('../../assets/img/user/uploader.png'),
      principalIdentityCardRearImg: require('../../assets/img/user/uploader.png'),
      businessLicenseImg: require('../../assets/img/user/uploader.png'),
      schoolyardBackImage: require('../../assets/img/user/uploader.png'),
      schoolyardLogoImage: require('../../assets/img/user/uploader.png'),
      stylistSkilledOption: [],
      stylistTeamworkOption: [],
      enterpriseSkilledOption: [],
      enterpriseTeamworkOption: [],
      authApprove: {
        designer: -1,
        enterprise: -1,
        park: -1
      },
      stylistUserName: '',
      stylistMobile: '',
      stylistTencent: '',
      stylistLoginName: '',
      stylistSkilled: [],
      stylistEmail: '',
      stylistIdCardNum: '',
      stylistTeamworkSchool: [],
      stylistIntroduce: '',
      stylistIdCardObverse: '',
      stylistIdCardRear: '',
      companyName: '',
      companySkilled: [],
      companyCreditCode: '',
      companyFixedTelephone: '',
      companyAddress: '',
      companyPrincipal: '',
      companyPrincipalMobile: '',
      companyEmail: '',
      companyLoginName: '',
      companyTeamworkSchool: '',
      companyIntroduce: '',
      companyPrincipalIdCardFirstImg: '',
      companyPrincipalIdCardRearImg: '',
      companyBusinessLicenseImg: '',
      schoolName: '',
      schoolMobile: '',
      schoolAddress: '',
      schoolPrincipalName: '',
      schoolLoginName: '',
      schoolIntroduce: '',
      schoolParkLogo: '',
      schoolBackImage: ''
    }
  },
  created () {
    this.fetchApprove()
    this.fetchGoodsAt()
    this.fetchEnterAt()
    this.fetchSchoolList()
  },
  methods: {
    // 隐藏设计师
    onPopupHideStylist () {
    },
    // 隐藏企业
    onPopupHideEnterprise () {
    },
    // 隐藏园区
    onPopupHideSchool () {
    },
    // 设计师身份证正面
    onIdentityCardFront (e) {
      this.onFileToBase(e.target.files[0]).then((base) => {
        this.identityCardFrontImg = base
      })
    },
    // 设计师身份证背面
    onIdentityCardRear (e) {
      this.onFileToBase(e.target.files[0]).then((base) => {
        this.identityCardRearImg = base
      })
    },
    // 企业身份证正面
    onPrincipalIdentityCardFront (e) {
      this.onFileToBase(e.target.files[0]).then((base) => {
        this.principalIdentityCardFrontImg = base
      })
    },
    // 企业身份证背面
    onPrincipalIdentityCardRear (e) {
      this.onFileToBase(e.target.files[0]).then((base) => {
        this.principalIdentityCardRearImg = base
      })
    },
    // 企业营业执照
    onBusinessLicense (e) {
      this.onFileToBase(e.target.files[0]).then((base) => {
        this.businessLicenseImg = base
      })
    },
    // 园区logo
    onSchoolyardLogoImage (e) {
      this.onFileToBase(e.target.files[0]).then((base) => {
        this.schoolyardLogoImage = base
      })
    },
    // 园区背景
    onSchoolyardBackImage (e) {
      this.onFileToBase(e.target.files[0]).then((base) => {
        this.schoolyardBackImage = base
      })
    },
    // file转base
    onFileToBase (file) {
      if (file.size > 1024 * 1024 * 2) {
        this.$vux.toast.text('上传图片不能超过2MB')
        return
      }
      return new Promise((resolve, reject) => {
        var reader = new FileReader()
        reader.readAsDataURL(file)
        // onload为读取后的回调函数
        reader.onload = (e) => {
          resolve(e.target.result)
        }
      })
    },
    // 设计师擅长领域选中列表
    onStylistSkilled (e) {
      this.stylistSkilled = e
    },
    // 设计师合作院校选中列表
    onStylistTeamwork (e) {
      this.stylistTeamworkSchool = e
    },
    // 企业擅长领域选中列表
    onEnterpriseSkilled (e) {
      this.companySkilled = e
    },
    // 企业合作院校选中列表
    onEnterpriseTeamwork (e) {
      this.companyTeamworkSchool = e
    },
    // 获取认证状态
    fetchApprove () {
      this.$api.getApprove({
        userId: this.$store.state.user.userId
      }).then(res => {
        if (res.code === 0) {
          this.authApprove = res.data
        }
      })
    },
    // 获取设计师擅长领域
    fetchGoodsAt () {
      this.$api.getGoodsAt({
      }).then(res => {
        if (res.code === 0) {
          this.stylistSkilledOption = []
          for (let i = 0; i < res.data.length; i++) {
            this.stylistSkilledOption.push({
              label: res.data[i].dictLabel,
              value: res.data[i].dictValue
            })
          }
        }
      })
    },
    // 获取设计师意向合作院校 和企业意向合作院校
    fetchSchoolList () {
      this.$api.getSchoolList({
      }).then(res => {
        if (res.code === 0) {
          this.stylistTeamworkOption = []
          this.enterpriseTeamworkOption = []
          for (let i = 0; i < res.data.length; i++) {
            this.stylistTeamworkOption.push({
              label: res.data[i].schoolName,
              value: res.data[i].schoolName
            })
            this.enterpriseTeamworkOption.push({
              label: res.data[i].schoolName,
              value: res.data[i].schoolName
            })
          }
        }
      })
    },
    // 获取企业擅长领域
    fetchEnterAt () {
      this.$api.getEnterAt({
      }).then(res => {
        if (res.code === 0) {
          this.enterpriseSkilledOption = []
          for (let i = 0; i < res.data.length; i++) {
            this.enterpriseSkilledOption.push({
              label: res.data[i].dictLabel,
              value: res.data[i].dictValue
            })
          }
        }
      })
    },
    // 提交设计师认证
    handApproveDesigner () {
      this.stylistIdCardObverse = this.identityCardFrontImg
      this.stylistIdCardRear = this.identityCardRearImg
      if (this.stylistUserName === '') {
        this.$vux.toast.text('请输入设计师姓名')
        return
      }
      if (this.stylistTencent === '') {
        this.$vux.toast.text('请输入设计师qq')
        return
      }
      if (JSON.stringify(this.stylistSkilled) === '[]') {
        this.$vux.toast.text('请选择擅长领域')
        return
      }
      if (this.stylistIdCardNum === '') {
        this.$vux.toast.text('请输入设计师身份证号')
        return
      }
      if (!this.checkIdentityCard(this.stylistIdCardNum)) {
        this.$vux.toast.text('请输入正取设计师身份证号')
        return
      }
      if (this.stylistTeamworkSchool === '') {
        this.$vux.toast.text('请选择合作院校')
        return
      }
      if (this.stylistIntroduce === '') {
        this.$vux.toast.text('请输入设计师个人介绍')
        return
      }
      if (this.stylistIdCardObverse === '') {
        this.$vux.toast.text('请上传身份证正面照')
        return
      }
      if (this.stylistIdCardRear === '') {
        this.$vux.toast.text('请上传身份证背面照')
        return
      }
      let skilled = ''
      for (let i = 0; i < this.stylistSkilled.length; i++) {
        skilled += this.stylistSkilled[i] + ','
      }
      // let teamwork = ''
      // for (let i = 0; i < this.stylistTeamworkSchool.length; i++) {
      //   teamwork += this.stylistTeamworkSchool[i] + ','
      // }
      this.$api.postApproveDesigner({
        userId: this.$store.state.user.userId,
        userName: this.stylistUserName,
        qq: this.stylistTencent,
        designerGoodField: skilled,
        email: this.stylistEmail,
        idCardNumber: this.stylistIdCardNum,
        schoolName: this.stylistTeamworkSchool,
        introduce: this.stylistIntroduce,
        idCardPositive: this.stylistIdCardObverse,
        idCardBack: this.stylistIdCardRear,
        sceneType: '1' // 1 个人中心 0 注册
      }).then(res => {
        if (res.code === 0) {
          this.fetchApprove()
          this.popupShowStylist = false
          this.$vux.toast.text('提交成功，请耐心等待审核。')
        }
      })
    },
    // 提交企业认证
    handApproveEnterprise () {
      this.companyPrincipalIdCardFirstImg = this.principalIdentityCardFrontImg
      this.companyPrincipalIdCardRearImg = this.principalIdentityCardRearImg
      this.companyBusinessLicenseImg = this.businessLicenseImg
      if (this.companyName === '') {
        this.$vux.toast.text('请输入公司名称')
        return
      }
      if (JSON.stringify(this.companySkilled) === '[]') {
        this.$vux.toast.text('请选择擅长领域')
        return
      }
      if (this.companyCreditCode === '') {
        this.$vux.toast.text('请输入社会信用代码')
        return
      }
      if (this.companyFixedTelephone === '') {
        this.$vux.toast.text('请输入企业固定电话')
        return
      }
      if (!this.checkFixedPhone(this.companyFixedTelephone)) {
        this.$vux.toast.text('请输入正确的企业固定电话，固定电话要带区号和横杠')
        return
      }
      if (this.companyAddress === '') {
        this.$vux.toast.text('请输入企业地址')
        return
      }
      if (this.companyPrincipal === '') {
        this.$vux.toast.text('请输入负责人姓名')
        return
      }
      if (this.companyEmail === '') {
        this.$vux.toast.text('请输入企业邮箱')
        return
      }
      if (!this.checkEmail(this.companyEmail)) {
        this.$vux.toast.text('请输入企业邮箱')
        return
      }
      if (this.companyTeamworkSchool === '') {
        this.$vux.toast.text('请选择意向合作院校')
        return
      }
      if (this.companyIntroduce === '') {
        this.$vux.toast.text('请输入个人介绍')
        return
      }
      if (this.companyPrincipalIdCardFirstImg === '') {
        this.$vux.toast.text('请上传身份证正面照')
        return
      }
      if (this.companyPrincipalIdCardRearImg === '') {
        this.$vux.toast.text('请上传身份证背面照')
        return
      }
      if (this.companyBusinessLicenseImg === '') {
        this.$vux.toast.text('请上传营业执照')
        return
      }
      let skilled = ''
      for (let i = 0; i < this.companySkilled.length; i++) {
        skilled += this.companySkilled[i] + ','
      }
      // let teamwork = ''
      // for (let i = 0; i < this.companyTeamworkSchool.length; i++) {
      //   teamwork += this.companyTeamworkSchool[i] + ','
      // }
      this.$api.postApproveEnterprise({
        userId: this.$store.state.user.userId,
        companyName: this.companyName,
        companyGoodField: skilled,
        creditCode: this.companyCreditCode,
        fixedTelephone: this.companyFixedTelephone,
        address: this.companyAddress,
        contacts: this.companyPrincipal,
        email: this.companyEmail,
        schoolId: this.companyTeamworkSchool,
        introduce: this.companyIntroduce,
        idCardPositive: this.companyPrincipalIdCardFirstImg,
        idCardBack: this.companyPrincipalIdCardRearImg,
        businessLicense: this.companyBusinessLicenseImg,
        sceneType: '1'
      }).then(res => {
        if (res.code === 0) {
          this.fetchApprove()
          this.popupShowEnterprise = false
          this.$vux.toast.text('提交成功，请耐心等待审核。')
        }
      })
    },
    // 园区认证
    fetchApprovePark () {
      this.schoolParkLogo = this.schoolyardLogoImage
      this.schoolBackImage = this.schoolyardBackImage
      if (this.schoolName === '') {
        this.$vux.toast.text('请输入园区名称')
        return
      }
      if (this.schoolAddress === '') {
        this.$vux.toast.text('请输入园区地址')
        return
      }
      if (this.schoolPrincipalName === '') {
        this.$vux.toast.text('请输入园区负责人姓名')
        return
      }
      if (this.schoolIntroduce === '') {
        this.$vux.toast.text('请输入园区介绍')
        return
      }
      if (this.schoolParkLogo === '') {
        this.$vux.toast.text('请选择园区logo')
        return
      }
      if (this.schoolBackImage === '') {
        this.$vux.toast.text('请选择园区背景图')
        return
      }
      this.$api.postApprovePark({
        userId: this.$store.state.user.userId,
        parkName: this.schoolName,
        address: this.schoolAddress,
        contacts: this.schoolPrincipalName,
        introduce: this.schoolIntroduce,
        parkLogo: this.schoolParkLogo,
        backImage: this.schoolBackImage,
        sceneType: '1'
      }).then(res => {
        if (res.code === 0) {
          this.fetchApprove()
          this.popupShowSchool = false
          this.$vux.toast.text('提交成功，请耐心等待审核。')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#userApprove{
  /deep/ .vux-popup-dialog.vux-popup-top {
    width: 8rem;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .userApproveContent{
    padding: .2rem;
    .ticationCommon{
      padding: .3rem;
      background-color: #f9f9f9;
      position: relative;
      margin-bottom: .2rem;
      img{
        width: 1rem;
        height: 1rem;
        display: inline-block;
        vertical-align: middle;
      }
      .ticationCommonInfo{
        display: inline-block;
        vertical-align: middle;
        padding-left: .2rem;
        h2{
          font-size: .14rem;
          font-weight: 500;
          color: #999;
          line-height: .5rem;
        }
        p{
          font-size: .14rem;
          font-weight: 500;
          color: #999;
          line-height: .5rem;
        }
      }
      button{
        font-size: .16rem;
        font-weight: 500;
        color: #fff;
        line-height: .4rem;
        border: none;
        padding: 0 .4rem;
        border-radius: .05rem;
        background-color: #15A29C;
        outline: none;
        position: absolute;
        right: .5rem;
        top: 50%;
        transform: translateY(-50%);
      }
      button.gray{
        background: #ccc;
        color: #fff;
      }
    }
  }
  .userApprovePopup{
    .userApprovePopupTitle{
      background-color: #15A29C;
      padding: .15rem .2rem;
      h2{
        font-size: .2rem;
        font-weight: 500;
        color: #fff;
        line-height: .28rem;
        display: inline-block;
      }
      i{
        font-style: normal;
        color: #fff;
        float: right;
        width: .25rem;
        text-align: center;
      }
    }
    .userApprovePopupCon{
      padding-top: .2rem;
      background-color: #fff;
      font-size: 0;
      width: 100%;
      padding-right: .3rem;
      ul{
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        align-items: center;
        li{
          width: 50%;
        }
      }
      .userMaterialMaterialLeft{
        width: 42%;
        text-align: right;
        display: inline-block;
        vertical-align: top;
        padding-bottom: .2rem;
        span{
          font-size: .16rem;
          font-weight: 500;
          color: #333;
          line-height: .4rem;
        }
      }
      .userMaterialMaterialRight{
        padding-bottom: .2rem;
        width: 58%;
        display: inline-block;
        vertical-align: top;
        input[type="text"]{
          display: inline-block;
          width: 2rem;
          border: 1px solid #ccc;
          border-radius: .05rem;
          font-size: .14rem;
          font-weight: 500;
          color: #333;
          line-height: .4rem;
          padding: 0 .1rem;
        }
        textarea {
          display: inline-block;
          width: 5.85rem;
          border: 1px solid #ccc;
          border-radius: .05rem;
          font-size: .14rem;
          font-weight: 500;
          color: #333;
          line-height: .4rem;
          padding: 0 .1rem;
          resize: auto;
        }
        label{
          width: 1.5rem;
          height: 1.5rem;
          display: inline-block;
          margin-right: 1rem;
          img {
            width: 100%;
            height: 100%;
            display: inline-block;
          }
        }
      }
      .btnBox{
        margin: auto;
        padding-bottom: .2rem;
        width: 2rem;
      }
    }
  }
}
</style>
